<template>
  <div class="sales-overview">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">销售总览</h1>
      <p class="page-subtitle">实时监控销售数据，分析业务趋势</p>
    </div>

    <!-- 快速统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-chart-line"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ formatNumber(totalSales) }}</div>
          <div class="stat-label">总销售额</div>
          <div class="stat-change positive">+12.5%</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-shopping-cart"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ formatNumber(totalOrders) }}</div>
          <div class="stat-label">订单总数</div>
          <div class="stat-change positive">+8.3%</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-users"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ formatNumber(totalCustomers) }}</div>
          <div class="stat-label">客户数量</div>
          <div class="stat-change positive">+5.7%</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-undo"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ formatNumber(returnRate) }}%</div>
          <div class="stat-label">退货率</div>
          <div class="stat-change negative">-2.1%</div>
        </div>
      </div>
    </div>

    <!-- 报表导航菜单 -->
    <div class="reports-section">
      <div class="reports-nav">
        <div 
          v-for="(report, index) in reports" 
          :key="index"
          :class="['report-item', { active: activeReport === report.id }]"
          @click="switchReport(report.id)"
        >
          <div class="report-icon">
            <i :class="report.icon"></i>
          </div>
          <div class="report-text">{{ report.title }}</div>
        </div>
      </div>
    </div>

    <!-- 图表展示区域 -->
    <div class="charts-container">
      <!-- 客户销售退货统计 -->
      <div v-if="activeReport === 'customer-return'" class="chart-section">
        <div class="chart-header">
          <h3>客户销售退货统计</h3>
          <div class="chart-actions">
            <button class="btn-filter">筛选</button>
            <button class="btn-export">导出</button>
          </div>
        </div>
        <div class="chart-content">
          <div class="chart-data">
            <div class="chart-bars">
              <div v-for="(item, index) in customerReturnData" :key="index" class="bar-group">
                <div class="bar-label">{{ item.customer }}</div>
                <div class="bars-container">
                  <div class="bar sales-bar" :style="{ height: (item.sales / maxSales * 200) + 'px' }">
                    <span class="bar-value">{{ formatCurrency(item.sales) }}</span>
                  </div>
                  <div class="bar return-bar" :style="{ height: (item.returns / maxReturns * 200) + 'px' }">
                    <span class="bar-value">{{ formatCurrency(item.returns) }}</span>
                  </div>
                </div>
                <div class="bar-legend">
                  <span class="legend-item">
                    <span class="legend-color sales-color"></span>
                    销售
                  </span>
                  <span class="legend-item">
                    <span class="legend-color return-color"></span>
                    退货
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 商品销售退货统计 -->
      <div v-if="activeReport === 'product-return'" class="chart-section">
        <div class="chart-header">
          <h3>商品销售退货统计</h3>
          <div class="chart-actions">
            <button class="btn-filter">筛选</button>
            <button class="btn-export">导出</button>
          </div>
        </div>
        <div class="chart-content">
          <div class="chart-data">
            <div class="pie-chart-container">
              <div class="pie-chart">
                <div v-for="(item, index) in productReturnData" :key="index" 
                     class="pie-slice" 
                     :style="getPieSliceStyle(index, productReturnData.length, item.percentage)">
                  <div class="slice-label">{{ item.product }}</div>
                  <div class="slice-value">{{ item.percentage }}%</div>
                </div>
              </div>
              <div class="pie-legend">
                <div v-for="(item, index) in productReturnData" :key="index" class="legend-item">
                  <span class="legend-color" :style="{ backgroundColor: getPieColor(index) }"></span>
                  <span class="legend-text">{{ item.product }} ({{ item.percentage }}%)</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 销售退货明细 -->
      <div v-if="activeReport === 'return-details'" class="chart-section">
        <div class="chart-header">
          <h3>销售退货明细</h3>
          <div class="chart-actions">
            <button class="btn-filter">筛选</button>
            <button class="btn-export">导出</button>
          </div>
        </div>
        <div class="chart-content">
          <div class="table-container">
            <table class="data-table">
              <thead>
                <tr>
                  <th>订单号</th>
                  <th>客户名称</th>
                  <th>商品名称</th>
                  <th>销售数量</th>
                  <th>销售金额</th>
                  <th>退货数量</th>
                  <th>退货金额</th>
                  <th>状态</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in returnDetailsData" :key="index">
                  <td>{{ item.orderNo }}</td>
                  <td>{{ item.customer }}</td>
                  <td>{{ item.product }}</td>
                  <td>{{ item.salesQty }}</td>
                  <td>{{ formatCurrency(item.salesAmount) }}</td>
                  <td>{{ item.returnQty }}</td>
                  <td>{{ formatCurrency(item.returnAmount) }}</td>
                  <td>
                    <span :class="['status-badge', item.status === '已退货' ? 'returned' : 'partial']">
                      {{ item.status }}
                    </span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- 客户销售统计 -->
      <div v-if="activeReport === 'customer-sales'" class="chart-section">
        <div class="chart-header">
          <h3>客户销售统计</h3>
          <div class="chart-actions">
            <button class="btn-filter">筛选</button>
            <button class="btn-export">导出</button>
          </div>
        </div>
        <div class="chart-content">
          <div class="chart-data">
            <div class="line-chart">
              <div class="chart-lines">
                <div v-for="(customer, index) in customerSalesData" :key="index" class="line-group">
                  <div class="line-label">{{ customer.name }}</div>
                  <div class="line-container">
                    <div class="line" :style="{ height: (customer.trend / maxTrend * 300) + 'px' }"></div>
                    <div class="line-points">
                      <div v-for="(point, pIndex) in customer.points" :key="pIndex" 
                           class="point" 
                           :style="{ left: (pIndex / (customer.points.length - 1) * 100) + '%', bottom: (point / maxTrend * 300) + 'px' }">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="chart-axis">
                <div class="axis-label">销售额趋势</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SalesOverview',
  data() {
    return {
      activeReport: 'return-details', // 默认选中销售退货明细
      totalSales: 1250000,
      totalOrders: 2847,
      totalCustomers: 156,
      returnRate: 3.2,
      reports: [
        {
          id: 'customer-return',
          title: '销售报表 - 客户销售退货统计',
          icon: 'fas fa-chart-bar'
        },
        {
          id: 'product-return',
          title: '销售报表 - 商品销售退货统计',
          icon: 'fas fa-chart-pie'
        },
        {
          id: 'return-details',
          title: '销售报表 - 销售退货明细',
          icon: 'fas fa-list-alt'
        },
        {
          id: 'customer-sales',
          title: '销售报表 - 客户销售统计',
          icon: 'fas fa-chart-area'
        }
      ],
      customerReturnData: [
        { customer: '华为科技', sales: 250000, returns: 15000 },
        { customer: '小米集团', sales: 180000, returns: 12000 },
        { customer: 'OPPO电子', sales: 220000, returns: 18000 },
        { customer: 'VIVO通信', sales: 160000, returns: 8000 },
        { customer: '苹果公司', sales: 300000, returns: 25000 }
      ],
      productReturnData: [
        { product: '智能手机', percentage: 35 },
        { product: '笔记本电脑', percentage: 25 },
        { product: '平板电脑', percentage: 20 },
        { product: '智能手表', percentage: 15 },
        { product: '其他配件', percentage: 5 }
      ],
      returnDetailsData: [
        { orderNo: 'SO2024001', customer: '华为科技', product: 'Mate60 Pro', salesQty: 100, salesAmount: 80000, returnQty: 5, returnAmount: 4000, status: '已退货' },
        { orderNo: 'SO2024002', customer: '小米集团', product: '小米14', salesQty: 80, salesAmount: 64000, returnQty: 3, returnAmount: 2400, status: '部分退货' },
        { orderNo: 'SO2024003', customer: 'OPPO电子', product: 'Find X7', salesQty: 60, salesAmount: 48000, returnQty: 2, returnAmount: 1600, status: '部分退货' },
        { orderNo: 'SO2024004', customer: 'VIVO通信', product: 'X100 Pro', salesQty: 70, salesAmount: 56000, returnQty: 0, returnAmount: 0, status: '正常' },
        { orderNo: 'SO2024005', customer: '苹果公司', product: 'iPhone 15', salesQty: 50, salesAmount: 40000, returnQty: 1, returnAmount: 800, status: '部分退货' }
      ],
      customerSalesData: [
        { name: '华为科技', trend: 250000, points: [200000, 220000, 240000, 250000] },
        { name: '小米集团', trend: 180000, points: [150000, 160000, 175000, 180000] },
        { name: 'OPPO电子', trend: 220000, points: [180000, 200000, 210000, 220000] },
        { name: 'VIVO通信', trend: 160000, points: [140000, 150000, 155000, 160000] },
        { name: '苹果公司', trend: 300000, points: [250000, 270000, 285000, 300000] }
      ]
    }
  },
  computed: {
    maxSales() {
      return Math.max(...this.customerReturnData.map(item => item.sales));
    },
    maxReturns() {
      return Math.max(...this.customerReturnData.map(item => item.returns));
    },
    maxTrend() {
      return Math.max(...this.customerSalesData.map(item => item.trend));
    }
  },
  methods: {
    switchReport(reportId) {
      this.activeReport = reportId;
    },
    formatNumber(num) {
      if (num >= 1000000) {
        return (num / 1000000).toFixed(1) + 'M';
      } else if (num >= 1000) {
        return (num / 1000).toFixed(1) + 'K';
      }
      return num.toString();
    },
    formatCurrency(amount) {
      return '¥' + (amount / 1000).toFixed(0) + 'K';
    },
    getPieSliceStyle(index, total, percentage) {
      const colors = ['#667eea', '#764ba2', '#f093fb', '#f5576c', '#4facfe'];
      const startAngle = (index / total) * 360;
      const endAngle = ((index + 1) / total) * 360;
      
      return {
        backgroundColor: colors[index % colors.length],
        transform: `rotate(${startAngle}deg)`,
        clipPath: `polygon(50% 50%, 50% 0%, ${50 + 50 * Math.cos(endAngle * Math.PI / 180)}% ${50 + 50 * Math.sin(endAngle * Math.PI / 180)}%)`
      };
    },
    getPieColor(index) {
      const colors = ['#667eea', '#764ba2', '#f093fb', '#f5576c', '#4facfe'];
      return colors[index % colors.length];
    }
  }
}
</script>

<style scoped>
.sales-overview {
  padding: 24px;
  background: #f8f9fa;
  min-height: 100vh;
}

/* 页面标题 */
.page-header {
  margin-bottom: 32px;
  text-align: center;
}

.page-title {
  font-size: 32px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 8px 0;
}

.page-subtitle {
  font-size: 16px;
  color: #6c757d;
  margin: 0;
}

/* 统计卡片 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}

.stat-icon i {
  font-size: 24px;
  color: white;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 8px;
}

.stat-change {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
}

.stat-change.positive {
  background: #d4edda;
  color: #155724;
}

.stat-change.negative {
  background: #f8d7da;
  color: #721c24;
}

/* 报表导航 */
.reports-section {
  margin-bottom: 32px;
}

.reports-nav {
  display: flex;
  background: white;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow-x: auto;
}

.report-item {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  min-width: 200px;
}

.report-item:hover {
  background: #f8f9fa;
}

.report-item.active {
  background: #667eea;
  color: white;
}

.report-icon {
  margin-right: 12px;
  width: 24px;
  text-align: center;
}

.report-icon i {
  font-size: 16px;
}

.report-text {
  font-size: 14px;
  font-weight: 500;
}

/* 图表容器 */
.charts-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.chart-section {
  min-height: 500px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid #e9ecef;
}

.chart-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
}

.chart-actions {
  display: flex;
  gap: 12px;
}

.btn-filter, .btn-export {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-filter {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn-filter:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

.btn-export {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
  color: white;
}

.btn-export:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(72, 187, 120, 0.3);
}

.chart-content {
  padding: 40px;
  min-height: 400px;
}

/* 柱状图样式 */
.chart-bars {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 300px;
  padding: 20px 0;
}

.bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120px;
}

.bar-label {
  font-size: 12px;
  color: #6c757d;
  margin-bottom: 10px;
  text-align: center;
  font-weight: 500;
}

.bars-container {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  height: 200px;
}

.bar {
  width: 30px;
  border-radius: 4px 4px 0 0;
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 5px;
}

.sales-bar {
  background: linear-gradient(to top, #667eea, #764ba2);
}

.return-bar {
  background: linear-gradient(to top, #f5576c, #f093fb);
}

.bar-value {
  font-size: 10px;
  color: white;
  font-weight: 600;
  transform: rotate(-90deg);
  white-space: nowrap;
}

.bar-legend {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: 11px;
  color: #6c757d;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 4px;
}

.sales-color {
  background: #667eea;
}

.return-color {
  background: #f5576c;
}

/* 饼图样式 */
.pie-chart-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  background: conic-gradient(
    #667eea 0deg 126deg,
    #764ba2 126deg 216deg,
    #f093fb 216deg 288deg,
    #f5576c 288deg 324deg,
    #4facfe 324deg 360deg
  );
}

.pie-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #6c757d;
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  margin-right: 8px;
}

.legend-text {
  font-weight: 500;
}

/* 表格样式 */
.table-container {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th,
.data-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #e9ecef;
}

.data-table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #495057;
}

.data-table tr:hover {
  background: #f8f9fa;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.returned {
  background: #f8d7da;
  color: #721c24;
}

.status-badge.partial {
  background: #fff3cd;
  color: #856404;
}

/* 折线图样式 */
.line-chart {
  position: relative;
  height: 400px;
  padding: 20px;
}

.chart-lines {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 300px;
}

.line-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
}

.line-label {
  font-size: 12px;
  color: #6c757d;
  margin-bottom: 10px;
  text-align: center;
  font-weight: 500;
}

.line-container {
  position: relative;
  height: 300px;
  width: 60px;
}

.line {
  width: 3px;
  background: linear-gradient(to top, #667eea, #764ba2);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 2px;
}

.line-points {
  position: absolute;
  width: 100%;
  height: 100%;
}

.point {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #667eea;
  border-radius: 50%;
  transform: translate(-50%, 50%);
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chart-axis {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e9ecef;
}

.axis-label {
  font-size: 12px;
  color: #6c757d;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sales-overview {
    padding: 16px;
  }
  
  .stats-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .reports-nav {
    flex-direction: column;
  }
  
  .report-item {
    min-width: auto;
    justify-content: center;
  }
  
  .chart-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .chart-actions {
    width: 100%;
    justify-content: space-between;
  }
  
  .chart-bars {
    flex-direction: column;
    height: auto;
    gap: 20px;
  }
  
  .bar-group {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
  }
  
  .pie-chart-container {
    flex-direction: column;
    gap: 20px;
  }
  
  .line-chart {
    height: auto;
  }
  
  .chart-lines {
    flex-direction: column;
    height: auto;
    gap: 20px;
  }
}

/* 滚动条样式 */
.reports-nav::-webkit-scrollbar {
  height: 6px;
}

.reports-nav::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.reports-nav::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.reports-nav::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>
